import React, { Component } from 'react'
import styles from "../assets/styles/taba.module.css"
import style from "../assets/styles/pele.module.css"
import Pageing from './Pageing'
import Model from './Model'

export default class TabA extends Component {
    state = {
        tableData: [
            {
                time: [
                    "2021-01-13 17:39:42",
                    "2023-01-13 17:39:42"
                ],
                useTime: [
                    "2023-01-13 17:39:42",
                    "2023-02-13 17:39:42"
                ],
                _id: "63919f95024a7602dc78082a",
                title: "测试优惠券",
                receiveType: "2",
                price: 300,
                state: false,
                show: false,
                system_data: true,
                create_time: "2022-12-08T08:25:57.209Z",
                imgSrc: "https://pic.616pic.com/ys_bnew_img/00/06/12/6QLoLGyq3C.jpg"
            },
            {
                time: [
                    "2021-01-13 17:39:42",
                    "2023-01-13 17:39:42"
                ],
                useTime: [
                    "2022-01-13 17:39:42",
                    "2024-01-13 17:39:42"
                ],
                _id: "63bd14c40d58511b7c6b6b18",
                title: "跨店满减",
                receiveType: "1",
                price: 300,
                state: true,
                show: true,
                create_time: "2023-01-10T07:33:24.011Z",
                imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
            },
            {
                time: [
                    "2021-01-13 17:39:42",
                    "2023-01-13 17:39:42"
                ],
                useTime: [
                    "2022-01-13 17:39:42",
                    "2024-01-13 17:39:42"
                ],
                _id: "63bd14c40d58511b7c6b6b19",
                title: "新人券",
                receiveType: "2",
                price: 300,
                state: true,
                show: true,
                create_time: "2023-01-10T07:33:24.011Z",
                imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
            },
            {
                time: [
                    "2021-01-13 17:39:42",
                    "2023-01-13 17:39:42"
                ],
                useTime: [
                    "2022-01-13 17:39:42",
                    "2024-01-13 17:39:42"
                ],
                _id: "63bd14c40d58511b7c6b6b20",
                title: "满100减20",
                receiveType: "3",
                price: 300,
                state: true,
                show: true,
                create_time: "2023-01-10T07:33:24.011Z",
                imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
            },
            {
                time: [
                    "2021-01-13 17:39:42",
                    "2023-01-13 17:39:42"
                ],
                useTime: [
                    "2022-01-13 17:39:42",
                    "2022-01-15 17:39:42"
                ],
                _id: "63bd14c40d58511b7c6b6b21",
                title: "数码产品券",
                receiveType: "1",
                price: 300,
                state: true,
                show: true,
                create_time: "2023-01-10T07:33:24.011Z",
                imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
            },
            {
                time: [
                    "2021-01-13 17:39:42",
                    "2023-01-13 17:39:42"
                ],
                useTime: [
                    "2022-01-13 17:39:42",
                    "2022-02-13 17:39:42"
                ],
                _id: "63bd14c40d58511b7c6b6b22",
                title: "跨店满减",
                receiveType: "2",
                price: 300,
                state: true,
                show: true,
                create_time: "2023-01-10T07:33:24.011Z",
                imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
            },
            {
                time: [
                    "2021-01-13 17:39:42",
                    "2023-01-13 17:39:42"
                ],
                useTime: [
                    "2022-01-13 17:39:42",
                    "2022-01-13 17:39:42"
                ],
                _id: "63bd14c40d58511b7c6b6b23",
                title: "中秋现礼券",
                receiveType: "3",
                price: 300,
                state: true,
                show: true,
                create_time: "2023-01-10T07:33:24.011Z",
                imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
            }
        ],
        searchType: "",
        searchData: "",
        currentPage: 1,
        pageSize: 4,
        visible: false,
        updateVisible: false,
        pname: "折扣券",
        pprice: "",
        ptype: "2",
        pstate: "1",
        parray: ["bk"],
        tempObj:{}
    }
    // 计算属性.定义一个属性,这个属性名字filterTableData
    get filterTableData() {
        const { tableData, searchType, searchData } = this.state
        return tableData.filter(item => {
            if (!searchType && !searchData) {
                return true
            } else {
                // item.searchType  item.title
                if (item[searchType].indexOf(searchData) != -1) {
                    return true
                }
            }
        })
    }
    createdData = () => {
        //state这个对象里面包含了很多数据，这个函数中，tableData
        const { tableData } = this.state
        return tableData.map(item => {
            return (
                <tr>
                    <td>{item._id}</td>
                    <td>{item.title}</td>
                    <td>
                        <img width="50px" src="https://5b0988e595225.cdn.sohucs.com/images/20170930/dbce7b6570db42859fe96f794836227f.jpeg" alt="" />
                    </td>
                    <td>001</td>
                    <td>001</td>
                    <td>001</td>
                    <td>001</td>
                    <td>
                        <button>删除</button>
                        <button>修改</button>
                    </td>
                </tr>
            )
        })
    }
    dataFilter = (value) => {
        switch (value) {
            case "1": return "新人券";
            case "2": return "满减券";
            case "3": return "通用券";
            default: return "类型不明确"
        }
    }
    changeTime = (useTime) => {
        const begin = useTime[0]
        const end = useTime[1]
        // "2023-09-08 12:09:08"
        const day1 = new Date(begin)
        const day2 = new Date(end)
        // 绝对值 日期对象直接减法 时间戳
        const diffDate = Math.abs(day1 - day2) / 1000 / 60 / 60 / 24
        return diffDate + "天"
    }
    //只要给表单原生绑定事件,默认产生event事件对象
    typeChange = (event) => {
        const value = event.target.value;
        this.setState({
            searchType: value
        })
    }
    textChange = (event) => {
        const value = event.target.value.trim()
        //异步,
        this.setState({
            searchData: value
        }, () => {
            console.log(this.state.searchData);
        })

        // console.log("searchData",this.state.searchData);
        // this.setState(()=>{
        //     return {
        //         searchData:value
        //     }
        // },()=>{
        //     console.log(this.state.searchData);
        // })

    }
    tableEvent = (event) => {
        console.log(event.target);
        console.log(event.target.getAttribute("pid"));
        //自己完善

    }
    fenye = (value) => {
        this.setState({
            currentPage: value
        })
    }
    closeModel = () => {
        this.setState({
            visible: false
        })
    }
    cloneModel2 = () => {
        this.setState({
            updateVisible: false
        })
    }

    changePname = (event) => {
        console.log(event.target);
        const value = event.target.value;
        this.setState({
            pname: value
        })
    }
    eduChange = (e) => {
        const { parray } = this.state
        const element = e.target
        console.log(element.checked);
        if (element.checked) {
            parray.push(element.value)
        } else {
            const index = parray.findIndex(item => item == element.value)
            parray.splice(index, 1)
        }
        this.setState({
            parray
        })
    }
    addTask = () => {
        const { pname, pprice, pstate, ptype, tableData } = this.state
        const temp = {
            time: [
                "2021-01-13 17:39:42",
                "2023-01-13 17:39:42"
            ],
            useTime: [
                "2023-01-13 17:39:42",
                "2023-02-13 17:39:42"
            ],
            _id: "63919f95024a7602dc78082m",
            title: "测试优惠券",
            receiveType: "2",
            price: 300,
            state: false,
            show: false,
            system_data: true,
            create_time: "2022-12-08T08:25:57.209Z",
            imgSrc: "https://pic.616pic.com/ys_bnew_img/00/06/12/6QLoLGyq3C.jpg"
        }

        const newData = { ...temp, title: pname, price: pprice, state: pstate, receiveType: ptype }
        console.log(newData);

        tableData.push(newData)
        this.setState({
            tableData,
            visible: false
        })
    }
    findTableData = (id) => {
        const {tableData} = this.state
        const temp = tableData.find(item=>item._id == id)
        this.setState({
            tempObj:temp,
            updateVisible:true
        })
    }
    render() {
        const { tableData, currentPage, pageSize, visible, pname, pprice, ptype, pstate, parray, updateVisible } = this.state
        const beginIndex = (currentPage - 1) * pageSize
        const endIndex = beginIndex + pageSize
        return (
            <React.Fragment>
                <div className={styles.box}>
                    {/* 搜索功能 */}
                    <div className={styles.search}>
                        <div>
                            <select name="" id="" onChange={this.typeChange}>
                                <option value="">请选中搜索类型</option>
                                <option value="title">名字搜索</option>
                                <option value="receiveType">优惠券类型</option>
                            </select>
                        </div>
                        <div>
                            <input onChange={this.textChange} type="text" placeholder='请输入搜索内容' />
                        </div>
                        <div>
                            {/* <button>搜索</button> */}
                            <button onClick={() => this.setState({ visible: true })}>添加</button>
                        </div>
                    </div>
                    {/* 表格渲染 */}
                    <div className={styles.mytable}>
                        <table onClick={this.tableEvent}>
                            <thead>
                                <tr>
                                    <th>编号</th>
                                    <th>优惠券名称</th>
                                    <th>优惠券图片</th>
                                    <th>优惠券类型</th>
                                    <th>面值</th>
                                    <th>使用时间</th>
                                    <th>是否开启</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {/* {this.createdData()} */}
                                {this.filterTableData.slice(beginIndex, endIndex).map(item => {
                                    return (
                                        <tr key={item._id}>
                                            <td>{item._id}</td>
                                            <td>{item.title}</td>
                                            <td>
                                                <img width="50px" src={item.imgSrc} alt="" />
                                            </td>
                                            <td>{this.dataFilter(item.receiveType)}</td>
                                            <td>{item.price}</td>
                                            <td>{this.changeTime(item.useTime)}</td>
                                            <td>{item.state ? "开启" : "关闭"}</td>
                                            <td>
                                                <button pid={item._id}>删除</button>
                                                <button onClick={()=>this.findTableData(item._id)}>修改</button>
                                            </td>
                                        </tr>
                                    )
                                })}
                            </tbody>
                        </table>
                    </div>
                </div>
                {/* 分页 */}
                <Pageing fenye={this.fenye} currentPage={currentPage} pageSize={pageSize} total={this.filterTableData.length}></Pageing>
                <Model visible={visible} closeModel={this.closeModel}>
                    <div className='item'>
                        <label htmlFor="">优惠券名字：</label>
                        <input value={pname} onChange={this.changePname} name='title' type="text" placeholder="请输入名字" />
                    </div>
                    <div className='item'>
                        <label htmlFor="">优惠券价格：</label>
                        <input value={pprice} onChange={(event) => this.setState({ pprice: event.target.value })} name='price' type="text" placeholder="请输入名字" />
                    </div>
                    <div className='item'>
                        <label htmlFor="">优惠券类型：</label>
                        <select name="receiveType" value={ptype} onChange={(e) => { this.setState({ ptype: e.target.value }) }}>
                            <option value="1">通用券</option>
                            <option value="2">商品券</option>
                            <option value="3">新人券</option>
                        </select>
                    </div>
                    <div className='item'>
                        <span>状态：</span>
                        <label htmlFor="">开启</label>
                        <input name='state' type="radio" onChange={(e) => this.setState({ pstate: e.target.value })} checked={pstate == "1"} value="1" />
                        <label htmlFor="">关闭</label>
                        <input name='state' type="radio" onChange={(e) => this.setState({ pstate: e.target.value })} checked={pstate == "0"} value="0" />
                    </div>
                    {/* 自己先实现 */}
                    <div className='item'>
                        <span>学历：</span>
                        <label htmlFor="">本科</label>
                        <input type="checkbox" onChange={this.eduChange} checked={parray.includes("bk")} value="bk" />
                        <label htmlFor="">专科</label>
                        <input type="checkbox" onChange={this.eduChange} checked={parray.includes("zk")} value="zk" />
                    </div>
                    <div>
                        <button onClick={this.addTask}>添加</button>
                    </div>
                </Model>

                <Model visible={updateVisible} closeModel={this.cloneModel2}>
                    <div className='item'>
                        <label htmlFor="">优惠券名字：</label>
                        <input value={this.state.tempObj.title} onChange={()=>{}} name='title' type="text" placeholder="请输入名字" />
                    </div>
                    <div className='item'>
                        <label htmlFor="">优惠券价格：</label>
                        <input value={this.state.tempObj.price} onChange={()=>{}} name='price' type="text" placeholder="请输入名字" />
                    </div>
                    <div className='item'>
                        <label htmlFor="">优惠券类型：</label>
                        <select name="receiveType" value={this.state.tempObj.receiveType} onChange={()=>{}}>
                            <option value="1">通用券</option>
                            <option value="2">商品券</option>
                            <option value="3">新人券</option>
                        </select>
                    </div>
                    <div className='item'>
                        <span>状态：</span>
                        <label htmlFor="">开启</label>
                        <input name='state' type="radio" onChange={(e) => this.setState({ pstate: e.target.value })} checked={pstate == "1"} value="1" />
                        <label htmlFor="">关闭</label>
                        <input name='state' type="radio" onChange={(e) => this.setState({ pstate: e.target.value })} checked={pstate == "0"} value="0" />
                    </div>
                    {/* 自己先实现 */}
                    <div className='item'>
                        <span>学历：</span>
                        <label htmlFor="">本科</label>
                        <input type="checkbox" onChange={this.eduChange} checked={parray.includes("bk")} value="bk" />
                        <label htmlFor="">专科</label>
                        <input type="checkbox" onChange={this.eduChange} checked={parray.includes("zk")} value="zk" />
                    </div>
                    <div>
                        <button onClick={this.addTask}>添加</button>
                    </div>
                </Model>

            </React.Fragment>
        )
    }
}
